<template>
  <div>
    <Navbar></Navbar>
    <el-row>
      <el-col :span="12">
        <el-button size="small" style="width: 100px;margin-right: 10px" class="filter-item" @click="">零件</el-button>
        <el-button size="small" style="width: 100px" class="filter-item" @click="">装配树</el-button>
        <el-button size="small" style="width: 100px" class="filter-item" @click="">大图显示</el-button>
      </el-col>
      <el-col :span="12">
          <el-select  placeholder="零件" size="small" style="width: 200px" class="filter-item" clearable @change="">

          </el-select>
          <el-input
            size="small"
            clearable
            placeholder=""
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="doQuery"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click=""
          >搜索</el-button>
        <div style="display:inline;margin-left:30px"> 过滤器：</div>
          <el-button size="medium " style="width: 100px;" class="filter-item" @click="">开启</el-button>
          <el-button size="medium " style="width: 100px;" class="filter-item" @click="">关闭</el-button>
      </el-col>
    </el-row>

    <div class="left-list-box">
      <div class="list-title">
        主要部分
      </div>
      <div class="list-item" v-for="(item,index) in tableData" :key="index" :class="{backGround:index==backGroundId}" @click="itemClick(index)">
        <div class="item-icon">
          <img src="./lj.png" width="20px" height="20px" alt="" srcset="">
        </div>
        <div class="item-text">
          {{item.name}}
        </div>
        <div class="item-right">
          >
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Navbar from "@/layout/components/Navbar"
  export default{
    components:{
      Navbar
    },
    data(){
      return{
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null,
        backGroundId:null
      }
    },
    methods:{
      itemClick(index){
        this.backGroundId = index;
      }
    }
  }
</script>

<style>
  .left-list-box{
    margin-top: 30px;
    margin-left: 50px;
    width: 30%;
  }
  .list-title{
    line-height: 40px;
    padding-left: 20px;
    font-weight: 600;
    background-color: #dbd3cb;
    font-size: 14px;
    color: rgb(0, 0, 0);
  }
  .list-item{
/* #e2d5be */
    border-right:solid 1px #eabb84;
    border-bottom:solid 1px #eabb84;
    border-left:solid 1px #eabb84;

    display: flex;

  }
  .list-item:hover{
    background-color: #e2d5be;
  }
  .backGround{
    background-color: #e2d5be;
  }
  .item-icon,.item-right{
    flex: 1;
    display:flex;
    justify-content: center;
    align-items: center;

  }
  .item-text{
    width: 80%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    border-left: dashed 1px #e6dcbb;
    color:#31734b;
    font-size: 14px;
  }

</style>
